<template>
  <div class="container">
    <div class="section">
      <ul class="info">
        <div class="section">
          <h2 class="title">基本信息</h2>
          <li class="list-item">
            <div class="tip">
              <span class="must">*</span> 营销位位置：
            </div>
            <div class="detail">
              <!-- 营销位置选择 -->
              <el-select v-model="form.positionType" placeholder="请选择营销位位置" class="form">
                <el-option
                  v-for="item in markData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </div>
            <!-- -->
            <div class="tip">
              <span class="must">*</span> 营销位名称：
            </div>
            <div class="detail">
              <el-input v-model="form.adName" auto-complete="off" class="form" />
            </div>
          </li>
          <li class="list-item">
            <div class="tip">
              <span class="must">*</span> 推广范围：
            </div>
            <div class="detail">
              <el-select v-model="form.provinceId" placeholder="请选择" class="form">
                <el-option
                  v-for="item in provinceData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </div>
            <!-- -->
            <div class="tip">
              <span class="must">*</span> 上下架时间：
            </div>
            <div class="detail">
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="dates"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
              ></el-date-picker>
            </div>
          </li>
          <li class="list-item">
            <div class="tip">
              <span class="must">*</span> 跳转位置：
            </div>
            <div class="detail">
              <el-select v-model="jumpType" placeholder="请选择跳转位置" class="form"  @change="changeType">
                <el-option
                  v-for="item in typeData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </div>
          </li>
          <!--跳转链接 -->
          <li class="list-item" v-if="jumpType ==1">
            <div class="tip">
              <span class="must">*</span> 链接标题：
            </div>
            <div class="detail">
              <el-input v-model="form.jumpUrlTitle" auto-complete="off" class="form" />
            </div>
            <!-- -->
            <div class="tip">
              <span class="must">*</span> 跳转链接：
            </div>
            <div class="detail">
              <el-input v-model="form.jumpUrl" auto-complete="off" class="form" />
            </div>
          </li>
          <!--项目专区 -->
          <li class="list-item" v-if="jumpType ==2">
            <div class="tip">
              <span class="must">*</span> 项目专区：
            </div>
            <div
              class="detail project_detail"
              style="width: 800px ; border:0.5px solid #c1c1c1; margin-bottom: 40px"
            >
              <div class="app-container">
                <!-- form行 -->
                <el-form :inline="true">
                  <div class="section">
                    <span class="tip" style="width: 70px">项目名称:</span>
                    <div class="content">
                      <el-input v-model="search_form.project_name" placeholder="请输入内容" />
                    </div>
                  </div>
                  <div class="section">
                    <div class="content">
                      <el-button type="primary medium" @click="searchProject">搜索</el-button>
                    </div>
                  </div>
                  <!-- <div class="section" style="float:right">
                    <div class="content">
                      <el-button type="primary medium" @click="onsubmitPro">已选择</el-button>
                    </div>
                  </div>-->
                </el-form>
                <!-- 表格 -->
                <div class="tableWrap">
<!--                  <div>已选择{{projectdatalength||0}}项</div>-->
                  <el-table
                    @selection-change="handleSelectionChange1"
                    v-loading="projectLoading"
                    ref="tableProjectData"
                    :data="tableProjectData"
                    :row-key="getRowKeysProject"
                    border
                    height="250"
                    style="width: 100%"
                  >
                    <!-- id -->
                    <el-table-column type="selection" width="55" :reserve-selection="true" />
                    <el-table-column fixed type="index" label="序号" width="50" />
                    <!-- 项目ID -->
                    <el-table-column prop="id" label="项目ID" align="center" />
                    <!-- 项目名称 -->
                    <el-table-column prop="groupProjectName" label="项目名称" align="center" />
                    <!-- 省份 -->
                    <el-table-column prop="provinceName" label="省份" align="center" />
                    <!-- 项目医院 -->
                    <el-table-column prop="hospitalName" label="项目医院" align="center" />
                  </el-table>
                </div>

                <!-- 分页器 -->
                <div class="block">
                  <el-pagination
                    background
                    :page-sizes="[10,20,50,100]"
                    :page-size="pageSizeProject"
                    :pager-count="11"
                    layout="total, sizes, prev, pager, next"
                    :total="totalProject"
                    @current-change="change_page"
                    @size-change="handleSizeChange"
                  />
                </div>
              </div>
            </div>
          </li>
          <!--礼包专区 -->
          <li class="list-item" v-if="jumpType ==3">
            <div class="tip">
              <span class="must">*</span> 礼包专区：
            </div>
            <div class="detail">
              <el-select v-model="goodsId" placeholder="请选择跳转位置" class="form">
                <el-option
                  v-for="item in tableGoodsData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </div>

          </li>
          <!--名医专区 -->
          <li class="list-item" v-if="jumpType ==4">
            <div class="tip">
              <span class="must">*</span> 名医专区：
            </div>
            <div
              class="detail project_detail"
              style="width: 800px ; border:0.5px solid #c1c1c1; margin-bottom: 40px"
            >
              <div class="app-container">
                <!-- form行 -->
                <el-form :inline="true">
                  <div class="section">
                    <span class="tip" style="width: 70px">医生名称:</span>
                    <div class="content">
                      <el-input v-model="search_form.doctor_name" placeholder="请输入内容" />
                    </div>
                  </div>
                  <div class="section">
                    <div class="content">
                      <el-button type="primary medium" @click="searchDoctor">搜索</el-button>
                    </div>
                  </div>
                  <!-- <div class="section" style="float:right">
                    <div class="content">
                      <el-button type="primary medium" @click="onsubmitDoc">已选择</el-button>
                    </div>
                  </div>-->
                </el-form>
                <!-- 表格 -->
                <div class="tableWrap">
<!--                  <div>已选择{{doctordatalength||0}}项</div>-->
                  <el-table
                    @selection-change="handleSelectionChange"
                    ref="tableDoctorData"
                    v-loading="doctorLoading"
                    :data="tableDoctorData"
                    border
                    height="250"
                    style="width: 100%"
                  >
                    <!-- id -->
                    <el-table-column type="selection" width="55" :reserve-selection="true" />
                    <el-table-column fixed type="index" label="序号" width="50" />
                    <!--                    &lt;!&ndash; 医生ID &ndash;&gt;-->
                    <!--                    <el-table-column prop="id" label="医院ID" align="center" />-->
                    <!-- 医生名称 -->
                    <el-table-column prop="doctor_name" label="医生名称" align="center" />
                    <!--                    &lt;!&ndash; 省份 &ndash;&gt;-->
                    <!--                    <el-table-column prop="provinceName" label="省份" align="center" />-->
                    <!-- 医院名称 -->
                    <el-table-column prop="hospital_name" label="医院名称" align="center" />
                  </el-table>
                </div>

                <!-- 分页器 -->
                <div class="block">
                  <el-pagination
                    background
                    :page-sizes="[10,20,50,100]"
                    :page-size="pageSizeDoctor"
                    :pager-count="11"
                    layout="total, sizes, prev, pager, next"
                    :total="totalDoctor"
                    @current-change="change_doctor_page"
                    @size-change="handleSizeDoctorChange"
                  />
                </div>
              </div>
            </div>
          </li>
          <!--会员卡 -->
          <!--图片 -->
          <li class="list-item">
            <div class="tip">
              <span class="must">*</span> 顶部广告位图：
              <div class="msk">图片尺寸:1:1 推荐（355px*355px）</div>
            </div>
            <div class="detail project_detail">
              <ul class="img-list">
                <li v-for="(item, index) in top_picture" :key="index" class="img-item">
                  <img v-if="item.url" :src="item.url" alt class="img" />
                  <div class="del-btn" @click.stop="del_top(item)">
                    <i class="el-icon-delete" />
                  </div>
                </li>
              </ul>
              <div class="upload-btn">
                <el-upload
                  action="https://mpingweb.yuepinyuemei.com/api/upload"
                  :data="{
                  dirPath: 'authentication',
                  upload_status: true }"
                  :multiple="false"
                  :file-list="top_picture"
                  :show-file-list="false"
                  list-type="picture-card"
                  :on-success="upload_top"
                  :before-upload="before_top"
                  :on-remove="del_top"
                >
                  <i class="el-icon-plus icon" />
                </el-upload>
              </div>
            </div>
            <!-- -->
            <div class="tip">
              <span class="must">*</span> 营销位图片：
              <div class="msk">图片尺寸:1:1 推荐（355px*355px）</div>
            </div>
            <div class="detail project_detail">
              <ul class="img-list">
                <li v-for="(item, index) in ad_picture" :key="index" class="img-item">
                  <img v-if="item.url" :src="item.url" alt class="img" />
                  <div class="del-btn" @click.stop="del_ad(item)">
                    <i class="el-icon-delete" />
                  </div>
                </li>
              </ul>
              <div class="upload-btn">
                <el-upload
                  action="https://mpingweb.yuepinyuemei.com/api/upload"
                  :data="{
                  dirPath: 'authentication',
                  upload_status: true }"
                  :multiple="false"
                  :file-list="ad_picture"
                  :show-file-list="false"
                  list-type="picture-card"
                  :on-success="upload_ad"
                  :before-upload="before_ad"
                  :on-remove="del_ad"
                >
                  <i class="el-icon-plus icon" />
                </el-upload>
              </div>
            </div>
          </li>
        </div>
      </ul>
    </div>
    <div class="sub-btn">
      <el-button type="primary" @click="save_marketing('form')">保存</el-button>
    </div>
  </div>
</template>
<script>
import tinymce from "@/components/Tinymce";
import {
  getProjectDetail,
  projectDetail,
  projectList,
} from "../../api/project";
import { validLonreg } from "../../utils/validate";
import { hospitalList } from "../../api/couponList";
import { provinceList } from "../../api/province";
import { getGoodsList, updateGoods } from "../../api/goods";
import { insertSixAd, updateSixAd } from "../../api/adv";
export default {
  components: {
    tinymce,
  },
  data() {
    return {
      marketingInfo: null,
      page_status: 0,
      dates: [], //时间
      tinymceId: this.id || "vue-tinymce" + Date.parse(new Date()),
      formLabelWidth: "120px", // 列表label宽度
      provinceData: [], //省份列表
      markData: [
        { id: 1, name: "左上" },
        { id: 2, name: "左下" },
        { id: 3, name: "中下" },
        { id: 4, name: "右下" },
        { id: 5, name: "右2" },
        { id: 6, name: "右1" },
      ], // 营销位位置list
      typeData: [
        { id: 0, name: "不跳转" },
        { id: 1, name: "跳转链接" },
        { id: 2, name: "项目专区" },
        { id: 3, name: "礼包专区" },
        { id: 4, name: "名医专区" },
        { id: 5, name: "会员卡" },
      ], // 跳转类型list
      //
      jumpType: "", // 跳转类型
      projectId: "", // 项目id
      goodsId: "", // 礼包id
      doctorId: "", //医生id
      // 勾选的数据
      projectdata: [],
      doctordatalength: null,
      projectdatalength:null,
      form: {
        id: undefined,
        positionType: "", // 营销位置-默认显示
        adName: "", // 名称
        adPicture: "", // 图片
        provinceId: [], // 地址id
        jumpUrl: "", // 跳转链接
        sort: 0, // 排序
        adType: 0, //	广告类型 0.营销(默认) 1.弹窗
        startTime: "", //	开始上架时间
        endTime: "", //	结束下架时间
        jumpUrlTitle: "", //	跳转链接标题
        topPicture: "", //	顶部广告图
        status: 0,
      },
      search_form: {
        project_name: "",
        goods_name: "",
        doctor_name: "",
      }, //
      top_picture: [], //头部图片
      ad_picture: [], //营销位图片
      //
      rules: {
        hospitalName: [
          {
            required: true,
            message: "请输入医院名称",
            trigger: "blur",
          },
          {
            max: 19,
            min: 2,
            message: "长度必须在2-19个字符之间",
            trigger: "blur",
          },
        ],
        province_id: [
          {
            required: true,
            message: "请选择省份",
            trigger: "blur",
          },
        ],
        locationDes: [
          {
            required: true,
            message: "请输入医院地址",
            trigger: "blur",
          },
          {
            max: 50,
            min: 5,
            message: "长度必须在5-50个字符之间",
            trigger: "blur",
          },
        ],
        locationLng: [
          {
            required: true,
            message: "请输入经度",
          },
          {
            validator: validLonreg,
            trigger: "blur",
            message: "请输入正确经度",
          },
        ],
        locationLat: [
          {
            required: true,
            message: "请输入纬度",
            trigger: "blur",
          },
          {
            validator: validLonreg,
            trigger: "blur",
            message: "请输入正确纬度",
          },
        ],
        hospitalIntro: [
          {
            required: true,
            message: "请输入医院简介，最多输入400字",
            trigger: "blur",
          },
        ],
      },
      tableProjectData: [], //项目列表数据
      pageSizeProject: 10, //条数
      pageProject: 1, //当前页
      totalProject: 0, //条数
      pageTalProject: 1, //页数
      projectLoading: false, //项目
      //
      tableGoodsData: [], //礼包列表数据
      pageSizeGoods: 10, //条数
      pageGoods: 1, //当前页
      totalGoods: 0, //条数
      pageTalGoods: 1, //页数
      goodsLoading: false, //礼包
      //
      tableDoctorData: [], //医生列表数据
      pageSizeDoctor: 10, //条数
      pageDoctor: 1, //当前页
      totalDoctor: 0, //条数
      pageTalDoctor: 1, //页数
      doctorLoading: false, //医生
    };
  },
  mounted() {
    console.log("this.$route.query.page_status", this.$route.query.page_status);
    this.page_status = this.$route.query.page_status;
    // 页面状态  1 添加  2 编辑
    switch (this.$route.query.page_status) {
      case 1:
        this.$route.meta.title = "添加营销位";
        break;
      case 2:
        this.$route.meta.title = "编辑营销位";
        break;
      default:
        break;
    }
    this.get_province_list();
    this.get_project_list();
    this.get_doctor_list();
    this.get_goods_list();
    if (this.$route.query.marketingInfo) {
      this.marketingInfo = this.$route.query.marketingInfo;
      this.form.id = this.marketingInfo.id;
      this.form.positionType = this.marketingInfo.positionType; // 营销位置-默认显示
      this.form.adName = this.marketingInfo.adName; // 名称
      this.form.adPicture = this.marketingInfo.adPicture; // 图片
      this.form.provinceId = this.marketingInfo.provinceId; // 地址id
      this.form.jumpUrl = this.marketingInfo.jumpUrl; // 跳转链接
      this.form.sort = this.marketingInfo.sort; // 排序
      this.form.adType = this.marketingInfo.adType; //	广告类型 0.营销(默认) 1.弹窗
      this.form.startTime = this.marketingInfo.startTime; //	开始上架时间
      this.form.endTime = this.marketingInfo.endTime; //	结束下架时间
      let times = this.form.startTime + "," + this.form.endTime;
      this.dates = times.split(",");

      this.form.jumpUrlTitle = this.marketingInfo.jumpUrlTitle; //	跳转链接标题
      this.form.topPicture = this.marketingInfo.topPicture; //	顶部广告图

      console.log("this.marketingInfo.jumpUrl", this.marketingInfo.jumpUrl);
      if (this.marketingInfo.jumpUrl === "jump:0") {
        this.jumpType = 0; //不跳
      } else if (this.marketingInfo.jumpUrl.indexOf("id:") === 0) {
        this.jumpType = 2; //项目
        let projectId = this.marketingInfo.jumpUrl.substr(
          3,
          this.marketingInfo.jumpUrl.length - 3
        );
        let idList = [];
        idList = projectId.split(",");
        this.projectId = idList;
        console.log("idList", idList);
        // console.log("this.$refs.tableProjectData",this.$refs.tableProjectData)
        // this.$refs.tableProjectData.selection = idList
      } else if (this.marketingInfo.jumpUrl.indexOf("goods:") === 0) {
        this.jumpType = 3; //礼包
        this.goodsId = this.marketingInfo.jumpUrl.substr(
          6,
          this.marketingInfo.jumpUrl.length - 6
        ) - 0;
      } else if (this.marketingInfo.jumpUrl.indexOf("doctor:") === 0) {
        this.jumpType = 4; //医生
         let doctorId = this.marketingInfo.jumpUrl.substr(
          7,
          this.marketingInfo.jumpUrl.length - 7
        );
        let idList = [];
        idList = doctorId.split(",");
        this.doctorId = idList;
        console.log("idList", idList);
      } else if (this.marketingInfo.jumpUrl === "card:1") {
        this.jumpType = 5; //会员
      } else {
        this.jumpType = 1; //链接
        this.form.jumpUrlTitle = this.marketingInfo.jumpUrlTitle
        this.form.jumpUrl = this.marketingInfo.jumpUrl
      }
      console.log("this.form.jumpType", this.jumpType);
    }
  },
  watch: {
    dates(val) {
      this.form.startTime = val ? val[0] : "";
      this.form.endTime = val ? val[1] : "";
    },
    "form.topPicture"(val) {
      const arr = [
        {
          name: "main",
          url: this.common.img_url + val,
        },
      ];
      this.top_picture = arr;
      this.$forceUpdate();
    },
    "form.adPicture"(val) {
      const arr = [
        {
          name: "main",
          url: this.common.img_url + val,
        },
      ];
      this.ad_picture = arr;
      this.$forceUpdate();
    },
    // doctordata(val){
    //   if(val){
    //     this.doctordata.length=val.length
    //   }
    // },
  },
  methods: {
    //
    getRowKeysProject(row) {
      return row.id;
    },

    changeType() {
      console.log("this.jumpType",this.jumpType)
      // this.$refs.tableProjectData.clearSelection();
      // this.$refs.tableDoctorData.clearSelection();
      //不跳转
      if (this.jumpType == 0) {
        this.form.jumpUrl = "jump:0";
        this.projectId = "";
        this.goodsId = "";
        this.doctorId = "";
        this.form.jumpUrlTitle = "";
      }
      //链接
      if (this.jumpType == 1) {
        this.projectId = "";
        this.goodsId = "";
        this.doctorId = "";
      }
      //项目
      if (this.jumpType == 2) {
        this.form.jumpUrl = "id:" + this.projectId;
        this.goodsId = "";
        this.doctorId = "";
        this.form.jumpUrlTitle = "";
      }
      //礼包
      if (this.jumpType == 3) {
        this.form.jumpUrl = "goods:" + this.goodsId;
        this.projectId = "";
        this.doctorId = "";
        this.form.jumpUrlTitle = "";
      }
      //医生
      if (this.jumpType == 4) {
        this.form.jumpUrl = "doctor:" + this.doctorId;
        this.projectId = "";
        this.goodsId = "";
        this.form.jumpUrlTitle = "";
      }
      //会员卡
      if (this.jumpType == 5) {
        this.form.jumpUrl = "card:1";
        this.projectId = "";
        this.goodsId = "";
        this.doctorId = "";
        this.form.jumpUrlTitle = "";
      }
    },
    // 上传top
    upload_top(res) {
      this.loading = false;
      this.form.topPicture = res.data;
      this.$forceUpdate();
    },
    // 上传top图之前钩子
    before_top() {
      this.loading = true;
    },
    // 删除top图
    del_top(val) {
      this.form.topPicture = "";
      this.top_picture = [];
    },
    // 上传广告图
    upload_ad(res) {
      this.loading = false;
      this.form.adPicture = res.data;
      this.$forceUpdate();
    },
    // 上传广告图之前钩子
    before_ad() {
      this.loading = true;
    },
    // 删除广告图
    del_ad(val) {
      this.form.adPicture = "";
      this.ad_picture = [];
    },
    // 获取省份
    get_province_list() {
      provinceList({})
        .then((res) => {
          // this.form.province = res.data.data.list
          this.provinceData = res.data.data.list;
        })
        .catch((res) => {
          this.$message.error("网络连接错误，请稍后再试");
        });
    },
    //获取项目列表
    get_project_list(
      options = {
        pageNum: this.pageProject,
        pageSize: this.pageSizeProject,
        id: 0,
        groupProjectName: "",
        projectCategoryId: "",
        groupSize: "",
        status: "",
        isRecommend: "",
        provinceId: "", // 如果筛选条件为全国时，传省份id为999
        hospitalName: "",
      }
    ) {
      this.projectLoading = true;
      projectList(options)
        .then((result) => {
          const res = result.data;
          // console.log("result.data", result.data);
          if (res.code === 0) {
            res.data.list.forEach((item) => {
              item.status = item.status - 0;
            });
            this.tableProjectData = res.data.list;
            // console.log('res.data.list',res.data.list);
            // console.log(this.projectId);

            if (this.projectId.length > 0) {
            for (var i = 0; i < this.projectId.length; i++) {
              for (var j = 0; j < this.tableProjectData.length; j++) {
                if (this.projectId[i] == this.tableProjectData[j].id) {
                  //里面包含有的都回显打勾 //回显打勾核心，toggleRowSelection的第一个参数是需要打勾的那一行数据，第二个参数表示是否选中，传true this.items[j],
                  console.log(666666);
                  this.$refs.tableProjectData.toggleRowSelection(
                    this.tableProjectData[j],
                    true
                  );
                }
              }
            }
            }
            // this.$nextTick(() => {
            //       console.log(111111);
            //       console.log(this.tableProjectData);
            //       console.log(this.projectId);
            //   this.tableProjectData.forEach((row) => {
            //       console.log(222222);

            //     if (this.projectId.indexOf(row.id) != -1) {
            //       console.log(3333333);
            //       this.$refs.tableProjectData.toggleRowSelection(row, true);
            //     }
            //   });
            // });
            this.totalProject = res.data.count;
            this.pageTalProject = Math.ceil(res.data.count / this.pageSize);
            this.projectLoading = false;
          }
        })
        .catch((err) => {
          this.projectLoading = false;
          //   this.$message.error('服务器网络错误，请稍后重试');
          this.$message.error(err);
        });
    },
    //筛选-项目
    searchProject() {
      this.get_project_list({
        pageNum: this.pageProject,
        pageSize: this.pageSizeProject,
        id: 0,
        groupProjectName: this.search_form.project_name,
        projectCategoryId: "",
        groupSize: "",
        status: "",
        isRecommend: "",
        provinceId: "", // 如果筛选条件为全国时，传省份id为999
        hospitalName: "",
      });
    },
    // 分页
    change_page(page) {
      this.pageProject = page;
      this.searchProject();
    },
    handleSizeChange(page) {
      this.pageSizeProject = page;
      this.searchProject();
    },
    //获取医生列表
    get_doctor_list(
      opt = {
        doctor_name: "",
        hospital_id: "",
        start_date: "",
        end_date: "",
        is_on_shelf: "",
        page: 1,
        pageSize: 10,
      }
    ) {
      hospitalList(opt).then((res) => {
        this.tableLoading = false;
        if (res.data.code == 0) {
          this.tableDoctorData = res.data.data.list;
          this.totalDoctor = res.data.data.total;

            if (this.doctorId.length > 0) {
            for (var i = 0; i < this.doctorId.length; i++) {
              for (var j = 0; j < this.tableDoctorData.length; j++) {
                if (this.doctorId[i] == this.tableDoctorData[j].id) {
                  //里面包含有的都回显打勾 //回显打勾核心，toggleRowSelection的第一个参数是需要打勾的那一行数据，第二个参数表示是否选中，传true this.items[j],
                  this.$refs.tableDoctorData.toggleRowSelection(
                    this.tableDoctorData[j],
                    true
                  );
                }
              }
            }
            }
        } else {
          this.doctorLoading = false;
          this.warnStatus(res.data.msg, "warning");
        }
      });
    },
    //筛选-医生
    searchDoctor() {
      this.get_doctor_list({
        page: this.pageDoctor,
        pageSize: this.pageSizeDoctor,
        doctor_name: this.search_form.doctor_name,
      });
    },
    // 分页-医生
    change_doctor_page(page) {
      this.pageDoctor = page;
      this.searchDoctor();
    },
    handleSizeDoctorChange(page) {
      this.pageSizeDoctor = page;
      this.searchDoctor();
    },
    //获取礼包列表
    get_goods_list(
      options = {
        pageSize: this.pageSizeGoods,
        pageNum: this.pageGoods,
        name: this.search_form.goods_name,
      }
    ) {
      this.goodsLoading = true;
      getGoodsList(options)
        .then((res) => {
          this.totalGoods = res.data.data.count;
          this.pageGoods = res.data.data.pageNum;
          this.pageSizeGoods = res.data.data.pageSize;
          this.tableGoodsData = res.data.data.list;
          this.goodsLoading = false;
        })
        .catch((error) => {
          this.goodsLoading = false;
          this.$message.error("网络连接错误，请稍后再试");
        });
    },
    //筛选-礼包
    searchGoods() {
      this.get_goods_list({
        pageSize: this.pageSizeGoods,
        pageNum: this.pageGoods,
        name: this.search_form.goods_name,
      });
    },
    //复选框勾选
    handleSelectionChange(val) {
      if (val) {
        this.doctordatalength = val.length;
      }
    },
    handleSelectionChange1(val) {
      if (val) {
        this.projectdatalength = val.length;
      }
    },
    //确定勾选项目数据
    onsubmitPro() {
      const selectData = this.$refs.tableProjectData.selection;
      this.projectdata = selectData;
      let ids = [];
      selectData.forEach((e) => {
        ids.push(e.id);
      });
      ids.join(","); //分割
      ids = ids.toString(); // 拍平成字符串
      this.projectId = ids;
      this.changeType();
      // this.$refs.tableProjectData.clearSelection();
    },

    //确定勾选医生数据
    onsubmitDoc() {
      const selectData = this.$refs.tableDoctorData.selection;
      // this.doctordata=selectData
      let ids = [];
      selectData.forEach((e) => {
        ids.push(e.id);
      });
      ids.join(","); //分割
      ids = ids.toString(); // 拍平成字符串
      this.doctorId = ids;
      this.changeType();
      // this.$refs.tableProjectData.clearSelection();
    },

    //保存营销位
    save_marketing() {
        switch (this.page_status) {
          case 1:
            this.add_marketing(this.form);
            break;
          case 2:
            this.rewrite_marketing(this.form);
            break;

          default:
            break;
        }

    },
    //添加
    add_marketing(e) {
      if (this.jumpType == 2) {
        this.onsubmitPro();
      } else if (this.jumpType == 4) {
        this.onsubmitDoc();
      }
      if (this.form.positionType === "") {
        this.$message.error("请选择营销位位置");
      } else if (this.form.adName === "") {
        this.$message.error("请输入营销位名称");
      } else if (this.form.provinceId === "") {
        this.$message.error("请选择推广范围");
      } else if (this.dates.length == 0) {
        this.$message.error("请选择上架时间");
      } else if (this.jumpType === "") {
        this.$message.error("请选择跳转类型");
      } else if (this.jumpType == 1 && this.form.jumpUrlTitle == "") {
        this.$message.error("请填写链接标题");
      } else if (this.jumpType == 1 && this.form.jumpUrl == "") {
        this.$message.error("请填写跳转链接");
      } else if (this.jumpType == 2 && this.form.jumpUrl == "") {
        this.$message.error("请选择项目");
      } else if (this.jumpType == 3 && this.form.jumpUrl == "") {
        this.$message.error("请选择礼包");
      } else if (this.jumpType == 4 && this.form.jumpUrl == "") {
        this.$message.error("请选择医生");
      } else if (this.form.topPicture === "") {
        this.$message.error("请上传顶部广告图片");
      } else if (this.form.adPicture === "") {
        this.$message.error("请上传营销位图片");
      }

      insertSixAd(e)
        .then((res) => {
              if (res.data.code === 7001) {
                this.$message.error(res.data.msg);
              } else {
                this.$message({
                  showClose: true,
                  message: "添加" + res.data.msg,
                  type: "success",
                });
                this.$router.push({ path:'/marketing'})
                // this.$router.go(-1);
              }
        })
        .catch((res) => {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "error",
          });
        });
    },
    //编辑
    rewrite_marketing(e) {
      if (this.jumpType == 2) {
        this.onsubmitPro();
      } else if (this.jumpType == 4) {
        this.onsubmitDoc();
      }

      if (this.form.positionType === "") {
        this.$message.error("请选择营销位位置");
      } else if (this.form.adName === "") {
        this.$message.error("请输入营销位名称");
      } else if (this.form.provinceId === "") {
        this.$message.error("请选择推广范围");
      } else if (this.dates.length == 0) {
        this.$message.error("请选择上架时间");
      } else if (this.jumpType === "") {
        this.$message.error("请选择跳转类型");
      } else if (this.jumpType == 1 && this.form.jumpUrlTitle == "") {
        this.$message.error("请填写链接标题");
      } else if (this.jumpType == 1 && this.form.jumpUrl == "") {
        this.$message.error("请填写跳转链接");
      } else if (this.jumpType == 2 && this.form.jumpUrl == "") {
        this.$message.error("请选择项目");
      } else if (this.jumpType == 3 && this.form.jumpUrl == "") {
        this.$message.error("请选择礼包");
      } else if (this.jumpType == 4 && this.form.jumpUrl == "") {
        this.$message.error("请选择医生");
      } else if (this.form.topPicture === "") {
        this.$message.error("请上传顶部广告图片");
      } else if (this.form.adPicture === "") {
        this.$message.error("请上传营销位图片");
      }

      updateSixAd(e)
        .then((res) => {
              if (res.data.code === 7001) {
                this.$message.error(res.data.msg);
              } else {
                this.$message({
                  showClose: true,
                  message: "修改" + res.data.msg,
                  type: "success",
                });
                this.$router.push({ path:'/marketing'})
              }
        })
        .catch((res) => {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "error",
          });
        });
    },

  },
};
</script>
<style lang="scss" scoped>
.container {
  padding: 30px;
  .section {
    .title {
      width: 130px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      margin-bottom: 20px;
    }
    .info {
      margin-left: 40px;
      .list-item {
        margin-bottom: 20px;
        /*display: inline-block;*/
        .tip {
          font-size: 14px;
          display: inline-block;
          vertical-align: middle;
          width: 150px;
          text-align: right;
          .msk {
            font-size: 10px;
            color: #666;
            margin-right: 20px;
            margin-top: 10px;
          }
          .must {
            display: inline-block;
            vertical-align: middle;
            color: #ff3040;
          }
        }
        .detail {
          color: #666;
          min-width: 350px;
          font-size: 16px;
          display: inline-block;
          vertical-align: middle;
          .el-select {
            display: block !important;
          }
          .img-list {
            display: inline-block;
            vertical-align: middle;
            .img-item {
              width: 150px;
              height: 150px;
              border: 1px solid #ccc;
              display: inline-block;
              vertical-align: middle;
              overflow: hidden;
              margin-right: 10px;
              position: relative;
              .img {
                width: 100%;
              }
              .del-btn {
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.3);
                color: #fff;
                line-height: 150px;
                text-align: center;
                font-size: 40px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                cursor: pointer;
                display: none;
              }
              &:hover {
                .del-btn {
                  display: block;
                }
              }
            }
          }
          .upload-btn {
            width: 150px;
            height: 150px;
            display: inline-block;
            vertical-align: middle;
            position: relative;
            .el-icon-plus {
              width: 150px;
              height: 150px;
              display: block;
              position: relative;
              &::before {
                font-size: 30px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
            }
          }
          &.project_detail {
            vertical-align: top;
          }

          .rule {
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-direction: row;
          }
        }
      }
    }
  }
  .sub-btn {
    .el-button {
      margin: 80px auto 20px auto;
      display: block;
    }
  }
  .app-container {
    /*padding-bottom: 40px;*/
    .section {
      display: inline-block;
      vertical-align: middle;
      margin-right: 20px;
      margin-top: 20px;
      margin-bottom: 20px;
      .tip {
        font-size: 14px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
      }
      .content {
        display: inline-block;
        vertical-align: middle;
      }
      .inp {
        display: inline-block;
        vertical-align: middle;
        border: none;
        outline: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 6px;
      }
    }
  }
  .form-control {
    width: 100%;
    padding-right: 6px;
    min-height: 300px;
    -webkit-overflow-scrolling: touch;
    resize: none;
    outline: 0 none;
    margin-top: 12px;
    font-size: 14px;
    /*font-family: MicrosoftYaHei;*/
    color: rgba(13, 20, 30, 1);
    line-height: 19px;
    opacity: 0.6;
  }
}
</style>


